<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
<!--      <el-page-header @back="goBack" :content="this.$router.currentRoute.name.substring(this.$router.currentRoute.name.indexOf('/')+1)">-->
      <el-page-header :content="this.$router.currentRoute.name.substring(this.$router.currentRoute.name.indexOf('/')+1)">
      </el-page-header>

          <!-- 表格区域 -->
            <header>

              <div style="margin-bottom: 10px;display: flex">
                <span class="hint" style="flex: 1;"></span>
                <el-button type="primary" icon="el-icon-circle-plus-outline"  v-hasPermission="'circuit:add'"  @click="openAdd()">新增</el-button>
              </div>
            </header>
            <el-table ref="multipleTable" header-align="center" size="small" :data="testData"
                      border style="width: 100%;text-align: center" height="420">
              <el-table-column align="center" prop="circuitId" label="序号" width="50"></el-table-column>
              <el-table-column align="center" prop="circuitType" label="线路名称" width="300"></el-table-column>
              <el-table-column align="center" prop="circuitTariff" label="线路资费" width="340" ></el-table-column>
              <el-table-column align="center" fixed="right" label="操作"  width="318">
                <template  v-slot="scope">
                  <el-tooltip content="修改" placement="top" effect="light">
                    <el-button size="small" icon="el-icon-edit" v-hasPermission="'circuit:update'" @click="openEdit(scope.row.circuitId)" plain circle ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>

      <!-- 添加窗口弹出层 -->
      <div v-if="isVisible_add" class="popups" @click.self="isVisible_add=false">
        <el-main style="width: 27vw;height: 38vh">
          <div class="header">
            <h3 style="flex: 1">{{add_edit===true?"新增":"编辑"}}线路类型</h3>
            <el-tooltip content="关闭页面" placement="top" effect="light">
              <el-button icon="el-icon-circle-close" circle  @click="isVisible_add=false"></el-button>
            </el-tooltip>
          </div>
          <div style="padding-left: 3vh">
            <el-form  ref="form" :model="addForm" :rules="formRules" size="small" style="margin-top: 2vh">
              <el-form-item label="线路名称:">
                <el-input
                    style="width: 240px;"
                    clearable
                    placeholder="请输入字段名称"
                    v-model="addForm.circuitType"
                ></el-input>
              </el-form-item>
              <el-form-item  label="线路资费:">
                <el-input-number
                    v-model.number="addForm.circuitTariff"
                    :precision="3"
                    :step="0.001"
                    :max="10"
                    :min="0.001"
                ></el-input-number>
              </el-form-item>
              <el-form-item style="margin-left: 9.5vh">
<!--              <el-checkbox v-model="addForm.enable">是否启用</el-checkbox>-->
              </el-form-item>
              <el-form-item style="margin-left: 32vh">
                <el-button type="primary" @click="addUpdate"  :loading="btnLoading" :disabled="btnDisabled">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      btnLoading: false,
      btnDisabled: false,
      add_edit:true,//true：add false：edit
      checked:true,//是否启用
      numType:0,//显示那个表信息的排序数字
      testData: [],//填充数据的地方{"test":1},{"test":2}
      isVisible_add:false,//添加窗口弹出层是否显示
      addForm:{
        circuitId:"",//线路编号
        circuitType:"",//线路类型
        circuitTariff:"", //线路资费
      },
      // 验证规则
      formRules: {
        circuitType: [
          { required: true, message: '线路名称不能为空', trigger: 'blur' }
        ],
        circuitTariff: [
          { required: true, message: '线路资费不能为空', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '资费必须大于0',
            trigger: 'blur'
          }
        ]
      },
      queryMap:{
      },
    }
  },
  methods: {
    openAdd(){
      this.addForm={
        circuitTariff:0.5,
      };
      this.isVisible_add=true;
      this.add_edit=true;
    },

    openEdit(row){
      //row是与表单绑定的集合的当前行对象
      this.edit(row)
      this.add_edit=false;
    },

    /**
     * 判断是添加还是修改
     */
    addUpdate(){
      if (this.add_edit){
        this.add();
      }else {
        this.update();
      }
    },
    /**
     * 添加
     */
    add(){
      if (!this.addForm.circuitType){
        return this.$message.error("请先填写线路名称");
      }
      if (this.addForm.circuitTariff <0.00){
        return this.$message.error("线路资费不能为0或者不能小于0");
      }
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return;
        } else {
          this.btnLoading = true;
          this.btnDisabled = true;
          const { data: res } = await this.$http.post(
              "/bgCircuit/addCircuit/" , this.addForm
          );
          if(res.success){
            this.$notify({
              title: "操作成功",
              message: "线路类型添加成功",
              type: "success"
            });
            this.editForm = {};
            await this.getCircuitList();
          } else {
            this.$message.error("线路类型添加失败:" + res.data.errorMsg);
          }
          this.isVisible_add = false;
          this.btnLoading = false;
          this.btnDisabled = false;
        }
      });
    },
    /**
     * 前往修改
     */
    async edit(row){
      const { data: res } = await this.$http.get("/bgCircuit/getCircuitById/"+row);
      if(!res.success){
        return this.$message.error("获取线路对象失败:"+res.data.errorMsg);
      }
      this.addForm = res.data;
      this.isVisible_add=true;
    },
    /**
     * 修改
     */
    update(){
      if (!this.addForm.circuitType){
        return this.$message.error("请先填写线路名称");
      }
      if (this.addForm.circuitTariff <0.00){
        return this.$message.error("线路资费不能为0或者不能小于0");
      }
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return;
        } else {
          this.btnLoading = true;
          this.btnDisabled = true;
          const { data: res } = await this.$http.post(
              "/bgCircuit/updateCircuit/" , this.addForm
          );
          if(res.success){
            this.$notify({
              title: "操作成功",
              message: "线路类型修改成功",
              type: "success"
            });
            this.addForm = {};
            await this.getCircuitList();
            this.isVisible_add = false;
          } else {
            this.$message.error("线路类型修改失败:" + res.data.errorMsg);
          }
        }
        this.isVisible_add = false;
        this.btnLoading = false;
        this.btnDisabled = false;
      });
    },
    /**
     * 获取线路列表
     */
    async getCircuitList(){
      const { data: res } = await this.$http.get("/bgCircuit/findList");
      if(!res.success){
        return this.$message.error("获取线路列表失败:"+res.data.errorMsg);
      }
      this.total = res.data.total;
      this.testData = res.data;
    }
  },
  created() {
    this.getCircuitList();
  },
  computed: {
  }
};
</script>
<style scoped>
.el-row {
  margin-bottom: 3vh;

  &:last-child {
    margin-bottom: 0;
  }
}
.hint{
   margin-left: 2vh;font-weight: 400;font-size: 12px;color: red;
 }
.dataDict{
  border: none;
  background-color: #fff;
  position: absolute;
  padding: .6vh 0;
  font-size: 18px;
}
.popups{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  background-color: #00000042;
  z-index: 100;
}
.popups .el-main{
  background-color: #fff;
  margin: 15vh auto;
}
.popups .el-main .header{
  display: flex;
  justify-content: center;
  margin-bottom: 2vh;
}
.popups .el-main .header button {
  flex-shrink: 0; /* 防止收缩 */
  font-size: 3vh;
  height: 4.6vh;
  border: none;
}
</style>
